<template>
  <div style="color: #666;font-size: 14px;">
    <div style="padding-bottom: 20px">
      <b>您好！{{ user.nickname }}</b>
      <span class="welcome-text">欢迎回来，祝您使用愉快！</span>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="dashboard-container" v-if="isAdmin">
      <el-col :span="8" v-for="(item, index) in statisticsData" :key="index">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-content">
            <div class="statistics-value">{{ item.value }}</div>
            <div class="statistics-title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 欢迎卡片 -->
      <el-col :span="24">
        <el-card class="welcome-card">
          <div slot="header" class="card-header">
            <span>欢迎使用本系统</span>
          </div>
          <el-divider />
          <div class="welcome-content">
            <p>{{ todayDate }} {{ weekDay }}</p>
            <p v-if="weatherInfo">今日天气：{{ weatherInfo }}</p>
            <div class="quote-container" v-if="isAdmin">
              <p class="quote">{{ dailyQuote.content }}</p>
              <p class="quote-author">—— {{ dailyQuote.author }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    

    
    <!-- 快速导航 -->
    <el-card style="margin-top: 20px;" v-if="isAdmin">
      <div slot="header" class="card-header">
        <span>快速导航</span>
      </div>
      <el-row :gutter="20" class="quick-nav">
        <el-col :span="6" v-for="(nav, index) in quickNavsList" :key="index">
          <div class="nav-item" @click="navigateTo(nav.path)">
            <i :class="nav.icon"></i>
            <span>{{ nav.title }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

        <!-- 快速导航 -->
        <el-card style="margin-top: 20px;" v-if ="!isAdmin">
      <div slot="header" class="card-header">
        <span>快速导航</span>
      </div>
      <el-row :gutter="20" class="quick-nav">
        <el-col :span="6" v-for="(nav, index) in UserquickNavsList" :key="index">
          <div class="nav-item" @click="navigateTo(nav.path)">
            <i :class="nav.icon"></i>
            <span>{{ nav.title }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      isAdmin: this.checkIsAdmin(),
      todayDate: new Date().toLocaleDateString(),
      weekDay: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][new Date().getDay()],
      weatherInfo: "晴朗 26°C",
      dailyQuote: {
        content: "生活不是等待风暴过去，而是学会在雨中翩翩起舞。",
        author: "佚名"
      },
      statisticsData: [
        { title: "民宿数量", value: 0, icon: "el-icon-s-home" },
        { title: "预订数量", value: 0, icon: "el-icon-s-order" },
        { title: "民宿资讯", value: 0, icon: "el-icon-s-marketing" }
      ],
      notices: [
        { title: "系统升级通知", time: "2024-05-10" },
        { title: "新功能上线公告", time: "2024-05-08" },
        { title: "端午节放假安排", time: "2024-05-05" },
        { title: "系统维护通知", time: "2024-05-01" }
      ],
      quickNavs: [
        { title: "个人中心", icon: "el-icon-user", path: "/person" },
        { title: "民宿管理", icon: "el-icon-s-data", path: "/homestays" },
        { title: "评论管理", icon: "el-icon-setting", path: "/reviews" },
      ],
      UserquickNavsList: [
        { title: "个人中心", icon: "el-icon-user", path: "/person" },
        { title: "我的预约", icon: "el-icon-s-data", path: "/bookings" },
      ]
    }
  },
  created() {
    // 在组件创建时调用统计方法
    this.homestayCount();
  },
  computed: {
    quickNavsList() {
      // 只返回前4个导航项
      return this.quickNavs.slice(0, 4);
    }
  },

  methods: {
    navigateTo(path) {
      this.$router.push(path);
    },
    checkIsAdmin() {
      // 检查用户是否为管理员
      const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {};
      return user.role === 'ROLE_ADMIN' || user.role === 'Super_Administrator';
    },
    homestayCount() {
      this.request.get("/homestays/count").then(res => {
        if (res.code === '200' && res.data) {
          // 假设返回的数据结构是一个包含三个统计值的对象数组
          this.statisticsData = res.data
        }
      }).catch(err => {
        console.error("获取统计数据失败:", err);
      });
    }
  }
}
</script>

<style scoped>
.welcome-text {
  margin-left: 10px;
  color: #909399;
}

.dashboard-container {
  margin-bottom: 20px;
}

.statistics-card {
  height: 120px;
  transition: all 0.3s;
  text-align: center;
}

.statistics-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.statistics-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.statistics-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.statistics-title {
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
}

.statistics-title i {
  color: #409EFF;
  margin-right: 5px;
  font-size: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-card {
  height: 100%;
}

.welcome-content {
  padding: 10px 0;
  line-height: 1.8;
}

.quote-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-left: 4px solid #409EFF;
  border-radius: 4px;
}

.quote {
  font-style: italic;
  color: #606266;
}

.quote-author {
  text-align: right;
  margin-top: 10px;
  color: #909399;
}

.notice-list {
  max-height: 250px;
  overflow-y: auto;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-title {
  color: #303133;
  display: flex;
  align-items: center;
}

.notice-title i {
  color: #F56C6C;
  margin-right: 5px;
}

.notice-time {
  color: #909399;
  font-size: 12px;
}

.quick-nav {
  padding: 10px 0;
}

.nav-item {
  text-align: center;
  padding: 20px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-item:hover {
  background-color: #f0f9ff;
}

.nav-item i {
  display: block;
  font-size: 30px;
  color: #409EFF;
  margin-bottom: 10px;
}
</style>
